<template>
  <view class="page h-screen">
    <view class="content">
      <view
        v-for="(item, index) in degreeList"
        :key="index"
        class="mr-40"
        @click="degreeClick(index)"
      >
        <text class="name1" :class="{ select: degreeIndex == index }">{{
          `${item.name}`
        }}</text></view
      >
    </view>

    <view class="flex border h-screen">
      <view class="flex-2 border">
        <scroll-view scroll-y style="height: 97vh" class="left-main">
          <template v-for="(item, index) in qrySpecialtyList" :key="index">
            <view
              class="px-10 py-14 text-26 item-1"
              :class="{ 'qry-select': index == qryIndex }"
              @click="qryClick(item, index)"
            >
              {{ `${item.name}` }}
            </view>
          </template>
        </scroll-view>
      </view>
      <view class="flex-5">
        <scroll-view scroll-y style="height: 97vh" class="right-main">
          <u-collapse
            ref="ucollapse"
            v-if="childrensList.length"
            v-for="(item, index) in childrensList"
            :key="index"
            :value="childrensValue"
            @change="change"
            @close="close"
            @open="open"
          >
            <u-collapse-item :title="item.name" :name="item.name">
              <template #title>
                <text class="text-26">{{ item.name }}</text>
              </template>

              <template v-for="(item1, index1) in item.childrens" :key="index1">
                <view class="mb-18" @click="toStart(item1)">
                  {{ `${item1.code}  ${item1.name}` }}
                </view>
              </template>
              <text v-if="!item.childrens.length" class="">暂无数据</text>
            </u-collapse-item>
          </u-collapse>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      schoolCode: "",
      qryIndex: 0,
      qrySpecialtyList: [],
      childrensList: [],
      childrensValue: [""],
      degreeIndex: 0,
      degreeList: [
        {
          id: 22,
          title: "学术学位",
          name: "普通本科",
          status: 22,
        },
        {
          id: 112,
          title: "职业本科",
          name: "职业本科",
          status: 112,
        },
      ],
    };
  },
  onLoad(options) {
    this.current = 1;
    this.schoolCode = options.schoolCode || "1231242134";
    this.getList();
  },
  onShow() {},
  methods: {
    getList() {
      let that = this;
      this.$http
        .get1("/client/undergraduate/qrySpecialtyTree", {
          earnLevel: 2,
          degreeType: this.degreeList[this.degreeIndex].status,
          examType: 12,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.qrySpecialtyList = res.data;
            if (this.qrySpecialtyList.length) {
              let item = this.qrySpecialtyList[0];
              this.childrensList = item.childrens;
              this.$nextTick(() => {
                console.log("this.$refs==", that.$refs.ucollapse);
                // that.$refs.ucollapse[0].init();
                that.$refs.ucollapse?.forEach((item) => item?.init());
              });
            } else {
              this.childrensList.length = 0;
            }
          }
        });
    },
    // 定义 open 方法
    open(e) {
      // console.log("open", e);
    },

    // 定义 close 方法
    close(e) {
      // console.log("close", e);
    },

    // 定义 change 方法
    change(e) {
      // console.log("change", e);
    },
    qryClick(item, index) {
      let that = this;
      this.qryIndex = index;
      // console.log("item=", item);
      // 方法1：延时效果一般
      // this.childrensList = [];
      // setTimeout(() => {
      //   this.childrensList = item.childrens;
      // }, 300);

      this.childrensList = item.childrens;
      this.$nextTick(() => {
        console.log("this.$refs==", that.$refs.ucollapse);
        // that.$refs.ucollapse[0].init();
        that.$refs.ucollapse.forEach((item) => item?.init());
      });
    },
    toStart(item) {
      uni.navigateTo({
        url:
          "/pages/special/school" +
          "?specialtyId=" +
          item.id +
          "&specialtyName=" +
          item.name,
      });
    },
    degreeClick(index) {
      this.degreeIndex = index;
      this.qryIndex = 0;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.page {
  // padding: 20rpx;
  // box-sizing: border-box;
}

.content {
  position: fixed;
  // width: 690rpx;
  width: 100vw;
  top: 0;
  left: 0;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
  padding: 0 30rpx;
  height: 100rpx;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #333;
  z-index: 1;

  .name1 {
    border-bottom: 8rpx solid transparent;
    &.select {
      // text-align: right;
      // margin: 0 35rpx;
      // margin-right: 35rpx;
      border-bottom: 8rpx solid #5480f8;
    }
  }
}
.left-main {
  // background: #fff;
  padding-top: 108rpx;
  .item-1 {
    border-left: 8rpx solid transparent;
    white-space: nowrap;
  }
  .qry-select {
    border-left: 8rpx solid #5480f8;
    margin-left: 0rpx;
    margin-right: 8rpx;
    background: #fff;
    box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
    border-radius: 0rpx 20rpx 20rpx 0rpx;
  }
}
.right-main {
  padding-top: 100rpx;
  ::v-deep .u-cell {
    .u-cell__title-text {
      font-size: 26rpx;
    }
  }
}

// page > view > view.flex.border.h-screen > view.flex-5.border > scroll-view > view:nth-child(1)
// > view.u-collapse-item.data-v-82f3baf9 > view.u-cell.data-v-3fd6feca
</style>
